# ルーティング

アプリケーションでビューを切り替える一般的な方法は、ルーティングです。 このページでは、ルーティングを実現する方法をいくつか紹介します。

## Vue

Vueにおいてルーティングで推奨されるアプローチは、[ハッシュモード](https://next.router.vuejs.org/guide/essentials/history-mode.html#hash-mode)となります:

```js
import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    //...
  ],
});
```

## Angular

Angularにおいてルーティングで推奨されるアプローチは、[HashLocationStrategy](https://codecraft.tv/courses/angular/routing/routing-strategies#_hashlocationstrategy)となります:

```ts
RouterModule.forRoot(routes, { useHash: true });
```

## React

Reactにおいてルーティングで推奨されるアプローチは、[HashRouter](https://reactrouter.com/en/main/router-components/hash-router)となります:

```jsx
import { HashRouter, Routes, Route } from "react-router-dom";

ReactDOM.render(
  <HashRouter basename={"/"}>
    {/* The rest of your app goes here */}
    <Routes>
      <Route path="/" element={<Page0 />} exact />
      <Route path="/page1" element={<Page1 />} />
      <Route path="/page2" element={<Page2 />} />
      {/* more... */}
    </Routes>
  </HashRouter>,
  root
);
```

## Svelte

The recommended approach for routing in Svelte is [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router):

```svelte
<script>
    import Router from "svelte-spa-router";
</script>

<Router
    routes={{
        "/": Home,
        "/products": wrap({
            asyncComponent: () => import("./routes/Products.svelte"),
        }),
        "/settings": Settings,
        "*": NotFound,
    }}
/>
```
